import React, { useState,useEffect } from 'react'
import { Table } from 'antd';
import { Form,Row, Col, Input, Button,Radio,Upload,Select } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import {useDispatch, useSelector} from "react-redux"
import "./charge.less"

const {Option} = Select

const columns = [
  {
    title: '充电站名称',
    dataIndex: 'shopName',
    key:"shopName"
  },
  {
    title: '电话',
    dataIndex: 'tel',
    key:"tel"
  },
  {
    title: '地址',
    dataIndex: 'address',
    key:"address"
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    key:"idCard"
  },
  {
    title: '负责人',
    dataIndex: 'managerName',
    key:"managerName"
  },
  {
    title: '执照号',
    dataIndex: 'licenceNo',
    key:"licenceNo"
  },
  {
    title: '状态',
    dataIndex: 'status',
    key:"status"
  },
  {
    title: '执照图片',
    dataIndex: 'licenceImg',
    key: 'licenceImg',
    render: row => {
        return <img src={row} alt="" style={{width:"40px"}}/>
          }
  },
  {
    title: '操作',
    dataIndex: '',
    key:"idCardImg"
  },
];

export default function Charge() {
    const dispatch = useDispatch();
    const  {chargeData}  = useSelector((state) => state.chargeRC);
    // console.log(chargeData);
useEffect(()=>{
        dispatch({
            type: 'getChargeSaga',
            payload: "",
        })
    },[])

    const [expand, setExpand] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const [loading, setLoading] = useState(false)
  const [form] = Form.useForm();

  const getFields = () => {
    const count = expand ? 3 : 4;
    const children = [
        <Col span={5}>
          <Form.Item
            name="shopName"
            label="名称"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Input/>
          </Form.Item>
        </Col>,

<Col span={5}>
          <Form.Item
            name={`tel`}
            label="手机号"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Input/>
          </Form.Item>
        </Col>,

        <Col span={5}>
          <Form.Item
            name={`managerName`}
            label="负责人"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Input/>
          </Form.Item>
        </Col>,

        <Col span={5}>
          <Form.Item
            name={`idCard`}
            label="身份证号"
            rules={[
              {
                required: false,
                message: 'Input something!',
              },
            ]}
          >
            <Input/>
          </Form.Item>
        </Col>
    ];
    return children;
  };

  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };

  const onSelectChange = selectedRowKeys => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(selectedRowKeys);
  };

    const rowSelection = {
      selectedRowKeys,
      onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
        <div className="charge-box">
        <Form
      form={form}
      name="advanced_search"
      className="ant-advanced-search-form"
      onFinish={onFinish}
    >
      <Row gutter={24}>
      {getFields()}
        <Col span={4} style={{ textAlign: 'right' }}>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button
            style={{ margin: '0 8px' }}
            onClick={() => {
              form.resetFields();
            }}
          >
            重置
          </Button>
        </Col>
      </Row>
      <Row>
      </Row>
    </Form>
    <Button value="large" className="choose btn">新增</Button>
    <Button value="default" className="btn">删除</Button>
    <Select style={{ width: 120 }} placeholder="更多操作">
      <Option value="Excel">导出Excel</Option>
    </Select>
        <div style={{ marginBottom: 0 }}>
          <span style={{ marginLeft: 8 }}>
            {hasSelected ? `已选择 ${selectedRowKeys.length} 个` : ''}
          </span>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={chargeData} pagination={{pageSize:8}}/>
      </div>
    )
}
